<template>
    <w-pop ref="pop" :direction="'btt'" :showHeader="false" :closeModal="false">
        <el-icon class="close_icon" size="52" color="#fff" @click="handleClose">
            <CircleClose />
        </el-icon>
        <el-config-provider :locale="locale">
            <el-calendar ref="calendar" v-model="date" :value-format="'yyyy/MM/dd'">
                <template #header="{ date }">

                    <el-icon size="22" @click="selectDate('prev-month')">
                        <ArrowLeftBold />
                    </el-icon>
                    <span>{{ date }}</span>
                    <el-icon size="22" @click="selectDate('next-month')">
                        <ArrowRightBold />
                    </el-icon>
                </template>
            </el-calendar>
        </el-config-provider>
        <div v-if="isDCJH">
            <div class="diytime">
                <w-checkbox v-model="isDiyTime">愈员自行安排配送日期</w-checkbox>
            </div>
        </div>
        <div v-else>
            <div class="diytime" v-if="isHaveDCJH">
                <w-checkbox v-model="isDiyTime">愈员自行安排配送日期</w-checkbox>
            </div>
        </div>

    </w-pop>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { ElConfigProvider, ElMessage } from 'element-plus'
import { isCheck } from '@/api/car'
function isInRange(dateStr, startDateStr, endDateStr) {
    var date = new Date(dateStr);
    var startDate = new Date(startDateStr);
    var endDate = new Date(endDateStr);
    return (date >= startDate && date <= endDate);
}
export default defineComponent({
    components: {
        ElConfigProvider
    },
    setup(props, { emit }) {
        const isDiyTime = ref(false) //会员自选时间
        const date = ref(null)
        const pop = ref()
        const startDate = ref(null)
        const endDate = ref(null)
        const open = (range, isshow) => {
            isDiyTime.value = false
            if (range) {
                console.log(range, '时间范围')
                startDate.value = range.split('_')[0]
                endDate.value = range.split('_')[1]
            }
            // 外面是否勾选了订餐计划
            isHaveDCJH.value = isshow
            pop.value.open();
            isCheckShow()
        };
        const handleClose = () => {
            pop.value.close()
        }
        //查询是否有订餐计划
        const isDCJH = ref(false)
        // 是否已有订餐计划
        const isHaveDCJH = ref(null)
        const isCheckShow = async () => {
            const res = await isCheck({})
            isDCJH.value = res
        }

        const calendar = ref()
        const selectDate = (val) => {
            if (!calendar.value) return
            calendar.value.selectDate(val)
        }
        // 点击日历
        watch(() => date.value, (v) => {
            if (v) {
                handleClickTime(v)
            }
        })
        // 点击会员自己安排
        watch(() => isDiyTime.value, (v) => {
            if (v) {
                emit('handleClickTime', '')
                handleClose()
            }
        })

        const handleClickTime = (time) => {
            var date2 = new Date(date.value);
            var year = date2.getFullYear()
            var month = date2.getMonth() + 1;
            month = (month < 10 ? '0' : '') + month
            var day = date2.getDate()
            day = (day < 10 ? '0' : '') + day
            var formattedDate = year + '-' + month + '-' + day;
            console.log(formattedDate, '选择时间')
            console.log(endDate.value, '结束时间')
            console.log(startDate.value, '开始时间')
            console.log(isInRange(formattedDate, startDate.value, endDate.value))
            if (isInRange(formattedDate, startDate.value, endDate.value)) {
                emit('handleClickTime', formattedDate)
                handleClose()
            } else {
                ElMessage({
                    type: 'error',
                    message: '不在指定时间内'
                })
            }

        }
        return {
            pop,
            date,
            isHaveDCJH,
            isDCJH,
            isDiyTime,
            calendar,
            locale: window.localStorage.getItem('LANG') == 'zh' ? zhCn : en,
            open,
            handleClose,
            selectDate,
            handleClickTime,
        }
    }
})
</script>
<style scoped lang='scss'>
.close_icon {
    position: absolute;
    right: 16px;
    top: -80px;
    z-index: 10000;
}

.diytime {
    margin: 0 16px;
    position: relative;
    top: -10px;
}
</style>